<style lang="less" scoped>
.mygrid{
  min-height:20em;
  .grid-item{
    float: left;
    width:33%;
    height:6em;
    margin-top:0.5em;
   
    text-align: center;
    
    .block{
      border:1px solid #ddd;
      border-radius: 0.5em;
      padding-top: 1em;
      margin:0.5em;
      .icon{
        height:3.5em;
      }
      .label{
        color:#333;
        font-size: 0.9em;
      }
      .footer{
        color:white;
        background-color: #80BBE4;
        font-size: 0.8em;
      }
    }
    
  }
}
.button-group{
  padding: 0.5em 1.5em;
}
</style>

<template>
    <div>
        <x-header class="header" :left-options="{backText: ''}">自助专区</x-header>
        <div class="content">
            <swiper :list="swiperData" auto></swiper>
            <div class="bar"></div>
            <div class="mygrid">
              <div class="grid-item" v-for="(x,i) in gridData1" @click="onGridClick(x)">
                <div class="block">
                  <img :src="x.src" class="icon" />
                  <div class="label">{{x.text}}</div>
                  <div class="footer">{{x.footer}}</div>
                </div>          
              </div>
              <div class="grid-item" v-for="(x,i) in gridData2" style="margin-top:2em;" @click="onGridClick(x)">
                <div class="block">
                  <img :src="x.src" class="icon" />
                  <div class="label">{{x.text}}</div>
                  <div class="footer">{{x.footer}}</div>
                </div>          
              </div>
            </div>
            <div class="button-group">
              <x-button :gradients="['#e8e8e8', '#e8e8e8']" @click.native="done('客服联系中，请稍候')"><div style="color:#868686;">联系客服</div></x-button>
            </div>
        </div>
    </div>
</template>
<script>
import {XHeader, Swiper, Grid, GridItem, Panel,XButton } from 'vux'

export default {
  
  data () {
    return {
     swiperData: [
        {
          url: 'https://m.10010.com/queen/tencent/king-new.html?param=epKw75C0yVkMJu0QeQkxeybEe7Q3cZjSgcUW4LHd4e7T0E%2Bw3uo1L%2FL6ML3cKapb5dprIq87aItFzV9tfIJ%2BSxIbxXK8OWaSRb30MGvcswIl6DQM1TP9DQNYGUvY24iBU%2FvRUVSTgFV0AZjILyTqMB45n1cYjc8yzVytEgH7sl3GIdzCp2iAvXiCP3Dn%2BTuPR0X2B3jNDRbSpKR6aLHwXZNY3l3qVh%2BO7Vf5ilw5%2BxU%3D',
          img: 'static/image/banner-1.png'
        }, {
          url: 'https://m.10010.com/queen/tencent/king-new.html?param=epKw75C0yVkMJu0QeQkxeybEe7Q3cZjSgcUW4LHd4e7T0E%2Bw3uo1L%2FL6ML3cKapb5dprIq87aItFzV9tfIJ%2BSxIbxXK8OWaSRb30MGvcswIl6DQM1TP9DQNYGUvY24iBU%2FvRUVSTgFV0AZjILyTqMB45n1cYjc8yzVytEgH7sl3GIdzCp2iAvXiCP3Dn%2BTuPR0X2B3jNDRbSpKR6aLHwXZNY3l3qVh%2BO7Vf5ilw5%2BxU%3D',
          img: 'static/image/banner-1.png'
        }
      ],
      gridData1:[
        {
          text:'话费查询',
          footer:'话费不够点这里',
          src:'static/image/huafeicx.png',
          link:'/install-send',
          url:'https://uac.10010.com/oauth2/new_auth?display=wap&page_type=05&app_code=ECS-YH-WAP&redirect_uri=http://wap.10010.com/t/loginCallBack.htm'
        },
        {
          text:'流量查询',
          footer:'流量不够点这里',
          src:'static/image/liuliangcx.png',
          link:'/install-send',
          url:'https://uac.10010.com/oauth2/new_auth?display=wap&page_type=05&app_code=ECS-YH-WAP&redirect_uri=http://wap.10010.com/t/loginCallBack.htm'
        },
        {
          text:'话费充值',
          footer:'话费不够点这里',
          src:'static/image/huafeicz.png',
          link:'/project-mgr',
          url:'http://upay.10010.com/npfwap/npfMobWap/bankcharge/index.html'
        },
       
      ],
      gridData2:[
        {
          text:'流量包订购',
          footer:'流量不够点这里',
          src:'static/image/liuliangdg.png',
          link:'/project-mgr',
          url:'http://wx.10010nm.com/WeiXinNM/nmllb/index.jsp'
        },
       
      ],
    }
  },
  methods: {
    onGridClick(item){
      if(item.func){
        console.log(item.func)
        this[item.func]()
      }else if(item.url){
        window.location.href=item.url
      }else{
        this.$router.push(item.link)
      }
      
    },
    done(str){
      this.$vux.toast.show({
        text:str,
        type:"success"  
      })
    }
  },
  components: {
    XHeader,
    Swiper,
    Grid, GridItem,
    Panel,
    XButton
  }
}
</script>